<template>
  <div>
    <div class="find1">
      <ul class="find">
        <li style="width:790px;"><input id="flfgTitle" class="f-font" type="text"></li>
        <li style="width:210px;">
          <ul class="f-but">
            <li @click="confirmFilter()"><i class="el-icon-search home-search"></i></li>
            <li class="line"></li>
            <li>
              <el-button type="text" @click="showSX()">高级检索</el-button>
            </li>
          </ul>
        </li>
        <li class="search-description">检索说明</li>
      </ul>
    </div>
    <el-dialog title="收货地址" v-model="dialogFormVisible" width="30%" :append-to-body="true"  >
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogFormVisible: true,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '320px'
    }
  },
  methods: {
    confirmFilter () {
      console.log('呵呵')
    },
    showSX () {
      console.log('哈哈')
      this.dialogFormVisible = true
      console.log(this.dialogFormVisible)
    }
  }
}
</script>

<style scoped>
.find1 {
  background: url(../assets/banner.png) center no-repeat #9a0000;
  height: 158px;
  background-position-y: -62px;
}

.f-font, .find {
  line-height: 60px;
}

.f-font {
  height: 60px;
  width: 770px;
  padding-left: 20px;
  border: 1px solid #700001;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.find li {
  float: left;
  cursor: pointer;
}

.find {
  width: 1080px;
  margin: auto;
  padding-top: 40px;
}

.f-but {
  background: #700001;
  height: 62px;
  border: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.f-but .line {
  height: 62px;
  background: #4e0200;
  width: 2px;
  border-right: 1px solid #890300;
}

.home-search {
  color: #fff;
  font-size: 24px !important;
  margin: auto 16px;
}

.advanced-search {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-left: 20px;
}

.advanced-search-icon {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-left: 10px;
}

.search-description {
  color: #fff;
  float: right !important;
  font-size: 18px;
  text-decoration: underline;
}

button, input, optgroup, option, select, textarea {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  outline: 0;
}

*, li {
  list-style: none;
}

</style>
